@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic);

@actionColor:#3598DC;

.clearBoth(){
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

*{
    font-family: Lato, Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
}

html{
    height:100%;
}

body{

    height:100%;
    background:#DEE3E7;

    .button{
        display:inline-block;
        padding:5px 10px;
        border-radius:4px;
        line-height: 14px;
        font-size: 14px;
        text-decoration: none;
        color:#ffffff;
        background:@actionColor;
        border:#297FB8 solid 1px;
        outline:none;

        &.small
        {
            background: #79b8dc;
            border-color:@actionColor;
            padding:3px 4px;
        }

        &.disabled{
            background:#ECF0F1;
            border-color:#BEC3C7;
            color:#BEC3C7;
            pointer-events:none;
        }

        &>span{
            display:inline-block;
            width:14px;
            height:14px;
            background:url('../imgs/glyphicons-halflings-white.png') no-repeat;
        }
        &.view>span{
            background-position:-48px 0;
        }
        &.edit>span{
            background-position: 0 -72px;
        }
        &.delete
        {
            background:#E84C3D;
            border-color:#C1392D;
            &>span{
                background-position: -312px 0;
            }
        }

        &.asc
        {
            &>span{
                background-position:-288px -120px;
            }
        }
        &.desc{
            &>span{
                background-position:-312px -120px;
            }
        }
    }

    menu#main{
        position:fixed;
        display:block;
        float:left;
        padding:0;
        width:10%;
        height:100%;
        background:#444444;
        li{
            display:block;
            text-align:center;
            list-style:none;
            a{
                padding:10px 0;
                display:block;
                text-decoration:none;
                color: #d2d2d2;
                font-weight:bold;
                &.current{
                    color:#ffffff;
                    background:#297FB8;
                }
            }

            &.global
            {
                &>a>span{
                    display:inline-block;
                    width:14px;
                    height:14px;
                    background:url('../imgs/glyphicons-halflings-white.png') no-repeat;
                }


                &.logout>a>span{
                    background-position:-384px 0;
                }
            }
        }
    }

    #content{
        width:90%;
        height:100%;
        float:right;

        h1, h2{
            font-weight:normal;
            margin-left:15px;
        }

        h2{
            margin-top:10px;
        }

        .new-entry, .back{
            padding:15px;
        }

        &>div.search{
            width:90%;
            margin:10px auto;
            background:#ffffff;
            border:solid 1px #ccc;
            form{
                padding:10px;
                &>.inp_search_s{
                    float:left;
                    margin-right:10px;
                    label{
                        line-height:24px;
                    }
                    .input{
                        float:right;
                        input{
                            margin-left:7px;
                            padding: 4px;
                            width: 300px;
                            border-radius: 3px;
                            border: solid 1px #dddddd;
                            outline:none;
                            &:focus{
                                border-color:#aaa;
                            }
                        }
                    }
                    &:after{
                        .clearBoth();
                    }
                }
                &:after{
                    .clearBoth();
                }
            }
        }

        .details{

            &.form{
                form{
                    display:table;
                    width:90%;
                    margin:0 auto;
                    background:#ffffff;
                    border:solid 1px #cccccc;

                    div.component{
                        display:table-row;
                        label, div.input{
                            display:table-cell;
                            padding:5px;
                        }
                        label{
                            width:20%;
                            color:#999;
                            text-align:right;
                            font-size:13px;
                        }

                        div.input{
                            textarea,
                            input[type='text']{
                                padding:5px;
                                outline:none;
                                width:calc(100% - 7px);
                                border:solid 1px #ffffff;
                                background: #f8f8f8;
                                &:focus{
                                    border:solid 1px #999;
                                    background:#ffffff;
                                }
                            }
                            textarea{height:200px;resize:vertical;}
                        }
                    }
                }
            }

            table.data{
                &.secondary{
                    th{
                        padding:10px 0;
                        background: #f6f6f6;
                    }
                    td{
                        text-align:center;
                    }
                }
                tr:hover{
                    cursor:default;
                    &>td{
                        background:#ffffff;
                    }
                }
                td{
                    border-top:solid 1px #eee;
                    &.label{
                        width:20%;
                        text-align:right;
                        color:#999;
                    }
                    &.empty{
                        color: #cacaca;
                    }
                }
            }
        }

        table{
            border:solid 1px #ccc;
            border-collapse: collapse;
            font-size:13px;
            display:table;
            width:90%;
            margin: 0 auto;
            &>thead{
                background:#ECEFF0;
                &>tr{
                    &>th{
                        vertical-align: middle;
                        color:#3B444E;
                        font-weight:bold;
                        text-align:center;
                        font-size:14px;
                        padding:4px 0;
                        &.edit, &.delete, &.view{
                            width:50px;
                        }
                    }
                }
            }
            &>tbody{
                background:#ffffff;
                &>tr{
                    padding:13px 0;
                    cursor:pointer;
                    &.odd{
                        &>td{
                            background:#fafafa;
                        }
                    }
                    &:hover{
                        &>td{
                            background:#ECF0F1;
                        }
                    }
                    &>td{
                        vertical-align: middle;
                        padding:5px;
                        &.edit, &.delete, &.view{
                            padding:5px 0;
                        }
                    }
                }
            }
        }

        .pagination{
            padding:5px 0;
            background:#ffffff;
            margin:10px auto;
            width:90%;
            border:solid 1px #ccc;
            &>.previous{
                text-align:right;
                float:left;
                width:25%;
            }
            &>.pages{
                text-align:center;
                float:left;
                width:50%;
            }
            &>.next{
                float:right;
                width:25%;
            }
            &:after{
                .clearBoth();
            }
        }
    }

    footer{
        position:fixed;
        bottom:0;
        height:14px;
        text-align: center;
        left:0;
        display: block;
        width: 100%;
        line-height: 14px;
        font-size: 12px;
        background: #ffffff;
    }

    #connexion{
        position:absolute;
        top:50%;
        left:50%;
        padding:0 0 15px;
        width:40%;
        margin-left:-20%;
        margin-top:-150px;
        background:#ffffff;
        h1{
            padding:10px 0;
            font-weight:bold;
            margin: 0 0 10px;
            color:#ffffff;
            background:#323A45;
            text-align:center;
        }

        form{
            width:50%;
            margin:0 auto;
            div.mandatory{
                color: #85a9bd;
                font-size:12px;
                text-align:right;
            }
            .component{
                margin:10px 0 0;
                label{
                    color:#9FA7B4;
                }
                input[type="text"], input[type="password"]{
                    border:solid 1px #E2E2E2;
                    background:#FAFBFD;
                    height:30px;
                    outline:none;
                    width:calc(~"100% - 20px");
                    margin:0 auto;
                    padding:10px;

                    &:focus{
                        background: #fcfdff;
                    }
                }
                input.button{
                    width:100%;
                    padding:20px 0;
                    border-radius:0;
                    border:none;
                    &:active{
                        padding:22px 0 18px;
                    }
                }
            }
        }
    }
}